<template>
  <div>
    <!-- 头部 -->
    <el-card style="margin:20px;">
      <el-form :model="regionInfo" :inline="true">
        <el-form-item label="区域搜索:">
          <el-input v-model="regionInfo.name" placeholder="请输入" style="width:150px" clearable />
        </el-form-item>
        <el-form-item>
          <el-button type="primary" icon="el-icon-search" @click="onSubmit">查询</el-button>
        </el-form-item>
      </el-form>
    </el-card>
    <el-card style="margin:20px;">
      <el-button icon="el-icon-circle-plus-outline" type="warning" @click="showAddDialog">新建</el-button>
      <!-- 表格区 -->
      <el-table
        v-loading="loading"
        :data="reglist"
        style="width: 100%"
      >
        <el-table-column
          type="index"
          label="序号"
          width="100"
        />
        <el-table-column
          prop="name"
          label="地域名称"
        />
        <el-table-column
          prop="nodeCount"
          label="点位数"
        />
        <el-table-column
          prop="remark"
          label="备注说明"
        />
        <el-table-column
          label="操作"
          width="180"
        >
          <template slot-scope="scope">
            <el-button type="text" size="small" @click="lookBtn(scope.row)">查看详情</el-button>
            <el-button type="text" size="small" @click="changeBtn(scope.row)">修改</el-button>
            <el-button type="text" size="small" style="color:red;" @click="delBtn(scope.row)">删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <el-pagination
        layout="slot"
        :total="totalPage"
      >
        <span class="left">共{{ totalCount }}条记录 第{{ pageIndex }}/{{ totalPage }}页</span>
        <div class="btns">
          <button class="btn" :disabled="pageIndex===1" @click="dowmFn(-1)"><span>上一页</span></button>
          <button class="btn" :disabled="pageIndex===totalPage" @click="dowmFn(1)"><span>下一页</span></button>
        </div>
      </el-pagination>
      <!-- 新增dialog -->
      <el-dialog
        title="新增区域"
        :visible="addDialog"
        width="30%"
        @close="closeAddDialog"
      >
        <el-form ref="addRef" :model="regionInfo" :rules="addRule">
          <el-form-item label="区域名称:" prop="regionName">
            <el-input v-model="regionInfo.regionName" placeholder="请输入" style="width:300px;" maxlength="15" show-word-limit />
          </el-form-item>
          <el-form-item label="备注说明:" prop="remark">
            <el-input v-model="regionInfo.remark" type="textarea" placeholder="请输入备注(不超过40字)" maxlength="40" show-word-limit style="width:300px;" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="addDialog = false">取 消</el-button>
          <el-button type="warning" @click="subAdd">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 修改dialog -->
      <el-dialog
        title="修改区域"
        :visible="changeDialog"
        width="30%"
        @close="closechangeDialog"
      >
        <el-form ref="addRef" :model="regionInfo" :rules="addRule">
          <el-form-item label="区域名称:" prop="regionName">
            <el-input v-model="regionInfo.regionName" placeholder="请输入" style="width:300px;" maxlength="15" show-word-limit />
          </el-form-item>
          <el-form-item label="备注说明:" prop="remark">
            <el-input v-model="regionInfo.remark" type="textarea" placeholder="请输入备注(不超过40字)" maxlength="40" show-word-limit style="width:300px;" />
          </el-form-item>
        </el-form>
        <span slot="footer" class="dialog-footer">
          <el-button @click="changeDialog = false">取 消</el-button>
          <el-button type="warning" @click="subChange">确 定</el-button>
        </span>
      </el-dialog>
      <!-- 查看详情dialog -->
      <el-dialog
        title="区域详情"
        width="30%"
        :visible="lookDialog"
        @close="closeLookDialog"
      >
        <el-form>
          <el-form-item label="区域名称:">
            <template>
              {{ regionInfo.name }}
            </template>
          </el-form-item>
          <el-form-item label="包含点位:">
            <el-table :data="regDetail" style="width: 70%" :header-cell-style="{padding:0,background:'#f3f6fb'}" :cell-style="{borderBottom:0}">
              <el-table-column type="index" label="序号" />
              <el-table-column prop="name" label="点位名称" />
              <el-table-column prop="vmCount" label="设备数量" />
            </el-table>
          </el-form-item>
        </el-form>
      </el-dialog>
    </el-card>
  </div>
</template>

<script>
import { regApi, addReg, changeRegApi, delRegApi, lookRegApi } from '@/api'
export default {
  data() {
    return {
      // 地区信息
      regionInfo: {
        name: '',
        id: '',
        nodeCount: '',
        remark: '',
        regionName: ''
      },
      loading: false,
      totalCount: 0,
      totalPage: 0,
      pageIndex: 1,
      pageSize: 10,
      reglist: [], // 地区列表
      addDialog: false, // 控制新增dialog显示隐藏
      changeDialog: false,
      lookDialog: false,
      regDetail: [], // 区域详情
      addRule: {
        regionName: [{ required: true, message: '请输入区域名称', trigger: 'blur' },
          { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
        ],
        remark: [{ required: true, message: '请输入备注', trigger: 'blur' },
          { min: 1, max: 40, message: '不超过40个字符', trigger: 'blur' }]
      }
    }
  },
  created() {
    this.getRegList()
  },
  methods: {
    // 点击提交新增
    subAdd() {
      this.$refs.addRef.validate(async valid => {
        if (!valid) return
        await addReg({ regionName: this.regionInfo.regionName, remark: this.regionInfo.remark })
        this.getRegList()
        this.$refs.addRef.resetFields()
        this.addDialog = false
      })
    },
    // 点击新增打开dialog
    showAddDialog() {
      this.addDialog = true
    },
    // 点击关闭修改dialog
    closechangeDialog() {
      this.changeDialog = false
    },
    // 点击关闭新增dialog
    closeAddDialog() {
      this.addDialog = false
    },
    // 翻页
    dowmFn(val) {
      this.getRegList({ pageIndex: this.pageIndex + val, pageSize: this.pageSize })
    },
    // 查询地区
    onSubmit() {
      this.getRegList({ name: this.regionInfo.name })
    },
    // 获取地区列表
    async getRegList(obj) {
      this.loading = true
      const res = await regApi(obj)
      // console.log(res)
      this.reglist = res.data.currentPageRecords
      this.pageIndex = Number(res.data.pageIndex)
      this.pageSize = res.data.pageSize
      this.totalCount = res.data.totalCount
      this.totalPage = Number(res.data.totalPage)
      this.loading = false
    },
    // 查看详情
    async lookBtn(val) {
      // console.log(val)
      this.lookDialog = true
      this.regionInfo.name = val.name
      const res = await lookRegApi({ pageIndex: this.pageIndex, pageSize: this.pageSize, regionId: val.id })
      this.regDetail = res.data.currentPageRecords
      this.regDetail.vmCount = res.data.currentPageRecords.vmCount
      this.regDetail.name = res.data.currentPageRecords.name
      // console.log(this.regDetail)
    },
    closeLookDialog() {
      this.lookDialog = false
    },
    // 删除
    async delBtn(val) {
      // console.log(val)
      await delRegApi({ id: val.id })
      this.getRegList()
    },
    // 修改
    async changeBtn(val) {
      this.changeDialog = true
      this.regionInfo.regionName = val.name
      this.regionInfo.remark = val.remark
      this.regionInfo.id = val.id
      // await changeRegApi(val.id)
      // console.log(val)
    },
    // 提交修改
    async subChange() {
      await changeRegApi({ regionName: this.regionInfo.regionName, remark: this.regionInfo.remark, id: this.regionInfo.id })
      this.getRegList()
      this.changeDialog = false
      this.$message.success('修改成功')
    }
  }
}
</script>

<style>

</style>
